<template>
  <div>
    <!-- 名称 -->
    <div class="flex justify-between q-mt-sm">
      <div>{{ title }}</div>
      <div>{{ (value * 100).toFixed(0) }}%</div>
    </div>
    <!-- 进度条 -->
    <div class="progress position-relative">
      <div class="p-children position-absolute" :style="{ background: alarm ? '#E43434' : '#5F77FD', width: `${value * 100}%` }"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'process',
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Number,
      default: 0.8
    },
    alarm: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped lang="stylus">

.progress
  height 8px
  background #e8e8e8
  border-radius 4px

  .p-children
    height 8px
    border-radius 4px
    transition width 500ms ease
</style>
